<style>
table{
margin-top : 10px;
text-align: center;
border-collapse: collapse;
width: 100%;
text-align: left;
}

#main-frbMessage-main-inbox{
height : 195px;
overflow: auto;
background-color: #d5d5d5;
}

table #table-title{
color : #595653	;
height: 30px;
background-color: white;
text-align: center;
}

table td{
padding-left : 20px;
padding-right: 20px;
cursor : pointer;
margin-bottom: 2px;
font-size : 13px;
}


table .click-to-view:hover{
background-color: #2DACBF;
color : white;
}
#main-frbMessage-message{
background-color: #d5d5d5;
margin-top: 20px;
padding : 20px;
}

#main-frbMessage-message-content p{
overflow: auto;
text-align : justify;
margin-top: 6px;
margin-left: 30px;	

}

#main-frbMessage-message div{
margin-bottom: 10px;
font-size: 14px;
color : #595653;
}

.new-message-eq-1{
color : black;
}

.new-message-eq-0{
color : grey;
}

#main-frbMessage-main{
background-color: white;
width : 900px;
margin-left : auto;
margin-right: auto;
padding : 10px;
}

#main-frbMessage-main-title{
color : #595653;
font-weight: bold;
font-size: 16px;
background-color: #d5d5d5;
padding : 5px;
}

.text-shrink{
display: block;
height: 14px;
width : 500px;
overflow: hidden;
}

.text-hight{
color : black;
font-weight: bold;
}

#pagination{
float : right;
}

</style>
<div id='main-frbMessage-main'>
	<div id='main-frbMessage-main-title'>Messages 
	<span id='pagination'>
		<a href='{{baseurl}}admin/frbMessage/frbMessage_MainController/index?page={{previous_page}}' title='Précédent'>&lt</a>
		Page {{page}} / {{total}}
		<a href='{{baseurl}}admin/frbMessage/frbMessage_MainController/index?page={{next_page}}' title='Suivant'>&gt</a>
	</span>
	</div>
	<div id='main-frbMessage-main-inbox'>
		<table>
			<tr id='table-title'>
			<th> Date </th>  <th> Expéditeur </th> <th> Message </th>
			</tr>
			<!-- loop mailInbox -->
			<tr id='{{mailInbox' value.@mes_id}}' class='click-to-view new-message-eq-{{mailInbox' value.@mes_flag}}'>
				<td>{{mailInbox' value.@mes_date}}</td>  <td>{{mailInbox' value.@mes_nom}}</td>  <td class='text-shrink'>{{mailInbox' value.@mes_mes}}</td>
				<input type='hidden' name ='id' value='{{mailInbox' value.@mes_id}}'>
				<input type='hidden' name ='mail' value='{{mailInbox' value.@mes_mail}}'>
				<input type='hidden' name ='tel' value='{{mailInbox' value.@mes_tel}}'>
			</tr>
			<!-- endloop -->
		</table>
	</div>
	<div id='main-frbMessage-message'>
		<div id='main-frbMessage-message-from'></div>		
		<div id='main-frbMessage-message-tel'></div>
		<div id='main-frbMessage-message-date'></div>
		<div id="main-frrMessage-toolbox">
			<input type="hidden" id='tb-mail-to-answer' value=''>
			<input type="hidden" id='tb-id' value=''>
			<input type="button" value="Répondre" class="personal-button" id='answer'>
			<input type="button" value="Supprimer" class="personal-button" id='delete-mess'>
		</div>
		<div id='main-frbMessage-message-content'>Message : <p></p> </div>
	</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
	$('#main-frbMessage-message').hide();
	$("#answer").click(function(){
		var mail = $("#tb-mail-to-answer").attr('value');
		window.location.href = "mailto:"+mail+"?subject=[marseille-appart.fr] Réponse demande d'informations&body=Bonjour,";
	});

	$("#delete-mess").click(function(){
		if(!confirm("Êtes-vous sûr de vouloir supprimer ce message ?")) return;
		var id_mss = $("#tb-id").attr("value");
		$.ajax({
			type : 'POST',
			url: "{{baseurl}}admin/frbMessage/frbMessage_MainController/index",
			cache: false,
			data: "action=del&id="+id_mss,
			success: function(html){
				$("#"+id_mss).hide();
				$('#main-frbMessage-message').fadeOut('slow')
			}
		});
		;
	});
	
	$(".click-to-view").click(function(){
		var tr = $(this)
		$('#main-frbMessage-message').fadeOut('slow', function(){
			var date = tr.children('td:eq(0)').html();
			var from = tr.children('td:eq(1)').html();
			var message = tr.children('td:eq(2)').html();
			var mail = tr.children('input:eq(1)').val();
			var id_mess = tr.children('input:eq(0)').val();
			var tel = tr.children('input:eq(2)').val();

			if(tel == "") tel="NC";
			if(mail == "") mail="NC";
			$("#tb-mail-to-answer").attr('value', mail);
			$("#tb-id").attr('value', id_mess);
			
			$('#main-frbMessage-message-from').html('De : <span class="text-hight">'+from+' &lt'+mail+'&gt</span>');
			$('#main-frbMessage-message-tel').html('Téléphone: <span class="text-hight">'+tel+'</span>');
			$('#main-frbMessage-message-date').html('Le : <span class="text-hight">'+date+'</span>');
			$('#main-frbMessage-message-content p').html('<span class="text-hight">'+message+'</span>');
			
			$('#main-frbMessage-message').fadeIn('slow');

			var url = '{{baseurl}}admin/frbMessage/frbMessage_MainController/readMessage';
			var id = tr.attr('id');
			var postData = tr.children('input').serialize();
			$.ajax({
				type : 'POST',
				url: url,
				cache: false,
				data: postData,
				success: function(html){
					tr.attr('class', 'click-to-view new-message-eq-0');
				}
			});
		});	
	});
});
</script>